<template>
  <!-- 显示所有地址 -->
  <div class="addrList">
    <div class="title">我的地址</div>
    <ul>
      <li v-for="(addr, index) in addrList" :key="index" @click="addrId = addr.id;">
        <span :class="{contact: true, check: addrId === addr.id}">{{addr.contact}}</span>
        <span class="addr">
          {{addr.contact}}-{{addr.province}}-{{addr.city}}-{{addr.district}}-{{addr.street}}-{{addr.address}}-{{addr.phone}}
        </span>
      </li>
    </ul>
  </div>
  <!-- 显示所有选中购物车-->
  <div class="cartList">
    <div class="title">我的商品</div>
    <ul v-if="route.query.cartList">
      <li v-for="(cart, index) in cartList" :key="index">
        <el-row>
          <el-col :span="2">
            <el-image
                :src="'/api/file/images/' + cart.goods.picList[0].url"
                style="height: 50px;width: 50px;border-radius: 5px;"
                fit="contain"
            />
          </el-col>
          <el-col :span="2">{{ cart.goods.name }}</el-col>
          <el-col :span="5">{{ cart.goods.color }} - {{ cart.goods.version }}</el-col>
          <el-col :span="2">{{ cart.goods.price }} 元</el-col>
          <el-col :span="1">
            x{{ cart.count }}
          </el-col>
          <el-col :span="3">总价：{{ cart.goods.price * cart.count }} 元</el-col>
        </el-row>
      </li>
    </ul>
    <ul v-else>
      <li>
        <el-row>
          <el-col :span="2">
            <el-image
                :src="pic"
                style="height: 50px;width: 50px;border-radius: 5px;"
                fit="contain"
            />
          </el-col>
          <el-col :span="2">{{ goods.name }}</el-col>
          <el-col :span="5">{{ goods.color }} - {{ goods.version }}</el-col>
          <el-col :span="2">{{ goods.price }} 元</el-col>
          <el-col :span="1">
            x1
          </el-col>
          <el-col :span="3">总价：{{ goods.price }} 元</el-col>
        </el-row>
      </li>
    </ul>
  </div>
<!--  生成订单 -->
  <div class="footer">
    总金额:￥<span class="total">{{ total }}</span>元
    <el-button type="danger" class="createOrder" @click="addOrder">生成订单</el-button>
  </div>
</template>

<script setup>

import {useRoute} from "vue-router";
import router from "@/router/index.js";
import addrApi from "@/api/AddrApi.js";
import {ElMessage} from "element-plus";
import {ref} from "vue";
import cartApi from "@/api/CartApi.js";
import {Delete} from "@element-plus/icons-vue";
import goodsApi from "@/api/GoodsApi.js";
import OrderApi from "@/api/OrderApi.js";
import orderApi from "@/api/OrderApi.js";

const route = useRoute()

// console.log(route.query.goodsId);
// console.log(route.query.cartList);

// 当然用户所有地址信息
const addrList = ref([])
// 被选中的地址
const addrId = ref(null)
// 当前用户选中的购物车
const cartList = ref([])
const goods = ref({})
// 总金额
const total = ref(0)

// 占位
const pic = ref('')

// 查询当然用户的所有地址
const getAddrList = () => {
  addrApi.getAll()
      .then(resp => {
        if (resp.code === 10000) {
          addrList.value = resp.data
          for (let addr of addrList.value) {
            if (addr.status === 1) {
              addrId.value = addr.id
              break
            }
          }
        } else {
          ElMessage.error(resp.msg)
        }
      })
}

// 查询当前用户已选择的购物车信息
const getCartList = () => {
  let cartIdList = route.query.cartList
  let goodsId = route.query.goodsId;
  if (cartIdList) {
    cartApi.getByIdList(cartIdList)
        .then(resp => {
          if (resp.code === 10000) {
            cartList.value = resp.data

            //   计算总金额
            let totalCache = 0
            cartList.value.forEach(cart => {
              totalCache = totalCache + cart.goods.price * cart.count
            })
            total.value = totalCache
          } else {
            ElMessage.error(resp.msg)
          }
        })
  }
  if (goodsId) {
    console.log(goodsId);
    goodsApi.getById(goodsId)
        .then(resp => {
          if (resp.code === 10000) {
            goods.value = resp.data
            // console.log(goods.value.picList[0].url)
            pic.value = '/api/file/images/' + goods.value.picList[0].url
            //   计算总价
            total.value = goods.value.price
          } else {
            ElMessage.error(resp.msg)
          }
        })
  }
}

// 生成订单
const addOrder = () => {
  // 判断有没有选择地址
  if (!addrId.value) {
    ElMessage.error("请选择收货地址");
    return
  }
  let cartIdList = route.query.cartList
  let goodsId = route.query.goodsId;
  if (cartIdList == null && goodsId == null) {
    ElMessage.error("请选择商品");
  }

  let params = {
    addrId:addrId.value,
    cartId:cartIdList,
    goodsId:goodsId
  }
  orderApi.addInfo(params)
      .then(resp => {
        if (resp.code === 10000) {
          ElMessage.success(resp.msg)
        //   去支付页面
          router.push({
            path:'/user/pay',
            query:{
              orderId:resp.data.orderId
            }
          })
        } else {
          ElMessage.error(resp.msg)
        }
      })
}

getAddrList()
getCartList()
</script>

<style scoped>
.addrList, .cartList, .footer {
  margin: 20px 0pc;
  padding: 20px;
  border: 2px solid #222;
  background-color: #FFFFFF;
}

.title {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 20px;
}

.addrList ul li {
  margin: 10px 0px 10px 15px;
  height: 30px;
  line-height: 30px;
}

.addrList .contact {
  margin-right: 15px;
  border: 2px solid #AAAAAA;
  text-align: center;
  display: inline-block;
  width: 80px;
  cursor: pointer;
}

.addrList .contact:hover {
  border: 2px solid var(--theme-color);
}

.addrList .check {
  border: 2px solid var(--theme-color);
}

.cartList ul li  {
  margin: 10px 0px 10px 15px;
  height: 50px;
  line-height: 50px;
}

.footer {
  text-align: right;
}

.footer .createOrder {
  margin-left: 15px;
}

.footer .total {
  font-weight: bold;
  color: var(--theme-color);
  font-size: 18px;
}
</style>